<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>${"${articleTitle!}-政府采购信息网"}</title>
    <#if articleInfo?length gt 1>
        <meta name="description" content="${articleInfo}">
    <#else>
        <meta name="description" content="${articleTitle}">
    </#if>
    <meta name="keywords" content="${keywords}">
    <link rel="icon" href="/web/img/favicon.ico">
    <link rel="shortcut icon" href="/web/img/favicon.ico">

    <link rel="stylesheet/less" href="/web/public/public.less">
    <link rel="stylesheet/less" href="/web/css/article.less">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2103922_29dsi13humk.css">
    <link rel="stylesheet" type="text/css" href="https://www.jq22.com/jquery/font-awesome.4.6.0.css">
    <link rel="stylesheet" href="/web/css/audio.css">

    <script src="/web/lib/jquery-1.12.4.min.js"></script>
    <script src="/web/lib/jquery.qrcode.min.js"></script>
    <script src="/web/lib/pgwslideshow.js"></script>
    <script src="/web/public/public.js"></script>
    <script src="https://pv.sohu.com/cityjson?ie=utf-8"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
    <script src="/web/lib/audio.js"></script>

    <!-- body -->
    <script>
        function closeSimpleView() {
            $('body').removeClass('simple-view');
        }
    </script>
    <!-- content -->
    <style type="text/less">
        @import "/web/public/public.less";
        #main-content{
            .source{
                font-size: 14px;
                color: #a8a8a8;
                padding-top: 25px;
            }

            .source .website{
                color: #7f7f7f;
            }
            .source>span+span{
                margin-left: 13px;
            }
            .source+hr{
                border-color: #EEEEEE;
                margin-top: 10px;
            }
            .content-wrap{
                width: 600px;
                padding: 0 5px;
                //min-height: 1000px;
                margin-left: 82px;
                margin-top: 60px;
                .content{
                    line-height: 36px;
                    h2{
                        text-align: center;
                        font-size: 20px;
                    }
                    ul{
                        padding-left: 20px;
                        line-height: 50px;
                    }
                    h3,h4{
                        font-size: 20px;
                    }
                    h5,h6{
                        font-size: 18px;
                    }
                    h6{
                        font-weight: normal;
                    }
                    .contents-first-level{
                    }

                    #content{
                        margin-top: 50px;
                        h3,h4,h5,h6{
                            text-align: center;
                            line-height: 50px;
                        }
                    }

                    p{
                        padding: 10px 0;
                        font-size: 18px;
                    }
                }
                .abstract{
                    width:599px;
                    font-size:16px;
                    font-weight:400;
                    color:#6E6E6E;
                    line-height:30px;
                }
                .hr{
                    width: 170px;
                    height: 6px;
                    background-color: #eeeeee;
                    margin: 15px 0;
                }
                .copyright{
                    padding: 10px 20px;
                    margin-top: 30px;
                    color: #6e6e6e;
                    font-size: 16px;
                    line-height: 30px;
                    border: 1px solid #EEEEEE;
                }
                .share{
                    text-align: center;
                    &>div{
                        display: inline-block;
                        height: 40px;
                        border: 1px solid #E60012;
                        border-radius: 20px;
                        line-height: 38px;
                        padding: 0 20px;
                        margin-top: 30px;
                        cursor: pointer;

                        &.weibo{
                            border-color: #E60012;
                            color: #E60012;
                        }
                        &.weixin{
                            border-color: #00972D;
                            color: #00972D;
                            margin-left: 30px;
                        }
                    }
                    img{
                        vertical-align: middle;
                    }
                }
                ul.tag-list{
                    font-size: 14px;
                    //.clearfix;
                    margin-top: 20px;
                    letter-spacing: 10px;
                    &>li{
                        display: inline-block;
                        height: 26px;
                        padding: 0 12px;
                        line-height: 26px;
                        border-radius: 13px;
                        background-color: #F0F0F0;
                        cursor: pointer;
                        //.fl;
                        letter-spacing: 0;
                        margin-top: 10px;
                        a{
                            color: #a8a8a8;
                        }
                    }
                }
                .special-ad{
                    font-size: 14px;
                    background-color: #F9F9F9;
                    border: 1px solid #DEDCDC;
                    color: #a8a8a8;
                    padding: 20px;
                    margin-top: 20px;
                    .clearfix;
                    p{
                        width: 400px;
                        .fl;
                        line-height: 30px;
                    }
                    img{
                        width: 114px;
                        height: 114px;
                        .fr;
                    }
                }
            }
        }
        .audio_wrap {
            width: 596px;
            height: 100px;
            background-color: #f5f5f5;
            border-radius: 8px;
            border: solid 1px #d0d0d0;
            padding: 20px;
            margin: 40px 0;
            .play_btn {
                color: #afacac;
                font-size: 60px;
                cursor: pointer;
                vertical-align: top;
                margin-top: 14px;
            }
            .handle_wrap {
                display: inline-block;
                width: 340px;
                vertical-align: top;
                margin: 20px 0 0 8px;
                .progress{
                    .slider {
                        background-color: #e4e4e4;
                        height: 6px;
                        width: 340px;
                        position: relative;
                        cursor: pointer;
                        border-radius: 25px;
                        a {
                            background: #333333;
                            margin-left: -6px;
                            margin-top: -4px;
                            position: absolute;
                            opacity: 1;
                            width: 12px;
                            height: 12px;
                            border-radius: 50%;
                            transition: opacity 0.3s;
                        }
                        .loaded{
                            background: rgba(255, 255, 255, 0.1);
                            position: absolute;
                            height: 100%;
                            opacity: 0.7;
                            border-radius: 5px;
                        }
                        .pace{
                            background: #a9a9a9;
                            position: absolute;
                            height: 100%;
                            opacity: 0.7;
                            border-radius: 5px;
                        }
                    }
                }
                .time_wrap{
                    overflow: hidden;
                    p{
                        display: inline-block;
                        margin: 0;
                        font-size: 16px;
                        font-weight: normal;
                        font-stretch: normal;
                        line-height: 36px;
                        letter-spacing: 0px;
                        color: #333333;
                    }
                    .player_time {
                        float: left;
                    }
                    .total_time {
                        float: right;
                    }
                }
            }
            .btn_wrap {
                display: inline-block;
                vertical-align: top;
                margin-left: 24px;
                .speed_wrap {
                    display: inline-block;
                    margin-top: 6px;
                    position: relative;
                    vertical-align: middle;
                    .speed_btn {
                        font-size: 24px;
                        color: #7f7f7f;
                        margin-top: 10px;
                        cursor: pointer;
                    }
                    .speed_list {
                        position: absolute;
                        bottom: 34px;
                        left: -14px;
                        background: rgba(0, 0, 0, .7);
                        padding: 6px 16px;
                        text-align: center;
                        display: none;
                        li {
                            color: #ffffff;
                            font-size: 14px;
                            line-height: 36px;
                            cursor: pointer;
                            &：hover {
                                color: rgb(240, 143, 16);
                            }
                        }
                    }
                }
                .volume {
                    width: 40px;
                    height: 6px;
                    display: inline-block;
                    vertical-align: middle;
                    margin-top: 20px;
                    margin-left: 10px;
                    .slider {
                        background-color: #e4e4e4;
                        float: left;
                        height: 6px;
                        width: 60px;
                        position: relative;
                        cursor: pointer;
                        a {
                            margin-left: -3px;
                            margin-top: -3px;
                            position: absolute;
                            opacity: 1;
                            background: #333333;
                            width: 12px;
                            height: 12px;
                            border-radius: 50%;
                            transition: opacity 0.3s;
                        }
                        .loaded{
                            background: #ffffff;
                            position: absolute;
                            height: 100%;
                            opacity: 0.7;
                            border-radius: 5px;
                        }
                        .pace {
                            background: rgba(0, 0, 0, .5);
                            position: absolute;
                            height: 100%;
                            opacity: 0.7;
                            border-radius: 5px;
                        }
                    }
                }
            }
        }

        .volume .slider:hover a,
        .slider.enable a {
            opacity: 1;
        }

        .volume .slider .loaded,
        .slider .pace {
            position: absolute;
            height: 100%;
            opacity: 0.7;
            border-radius: 5px;
        }
    </style>
    <script src="/web/lib/less.min.js"></script>
    <script>
        $(function () {
            var timer = setInterval(function () {
                try{
                    if(returnCitySN){
                        clearInterval(timer);
                        $.ajax({
                            url:ports.articleClickCount,
                            data:{
                                articleId:$('#main-content').data('articleId'),
                                ip:returnCitySN.cip
                            },
                            //设置跨域为true
                            crossDomain:true,
                            // 允许携带证书
                            xhrFields: {
                                withCredentials: true
                            },
                            success:function (res) {
                            }
                        })
                    }
                }catch (err){
                    if(err.toString().search('returnCitySN is not defined')==-1)
                        console.log(err)
                }
            },100)
        })
    </script>
</head>

<body>
<div class="container">
    ${header}
    <div id="simple-view-close" title="退出沉浸阅读" onclick="closeSimpleView()">
        <i class="iconfont icon-guanbi"></i>
    </div>
    <div id="main">
        <div class="position">
            <a href="${domain}/web/home.html" target="_blank">首页</a>
        </div>
        <div id="share-menu-wrap">
            <style type="text/less">
                @import "/web/public/public.less";
                #fragment-article-share-menu{
                    width: 57px;

                    .menu-list{
                        &>li{
                            width: 100%;
                            height: 62px;
                            line-height: 60px;
                            text-align: center;
                            background-color: #fafafa;
                            cursor: pointer;
                            transition: .5s;
                            position: relative;
                            margin-left: 0;

                            .cover{
                                visibility: hidden;
                                width: 100%;
                                height: 40px;
                                position: absolute;
                                left: 0;
                                top: 50%;
                                margin-top: -20px;
                                color: #ffffff;
                                line-height: 20px;
                            }
                            &:hover{
                                &.weibo{
                                    background-color: #E71F19;
                                }
                                &.weixin{
                                    background-color: #1EC354;
                                }
                                &.qzone{
                                    background-color: #ffc136;
                                }
                                &.comment{
                                    background-color: #e71f19;
                                }
                                &.collect{
                                    background-color: #FF8C01;
                                }
                                &.like{
                                    background-color: #e60012;
                                }
                                &.simple-view{
                                    background-color: #3C75F6;
                                }
                                .cover{
                                    visibility: visible;
                                }
                                .iconfont{
                                    color: #ffffff;
                                    /*&.icon-weibo{
                                        color: #e71f19;
                                    }
                                    &.icon-pengyouquan{
                                        color: #65f064;
                                    }
                                    &.icon-kongjian{
                                        color: #ffc136;
                                    }*/
                                    &.icon-pinglun{
                                        display: none;
                                    }
                                    &.icon-shoucang{
                                        display: none;
                                    }
                                    &.icon-shoucang1{
                                        display: none;
                                    }
                                    &.icon-wenben1{
                                        display: none;
                                    }
                                }
                            }

                            &+li{
                                border-top: 1px solid #f0f0f0;

                            }

                            &:nth-of-type(3n+4){
                                margin-top: 16px;
                                border-top: none;
                            }
                            &.collect.active{
                                .iconfont{
                                    color: #FF8C01;
                                }
                            }
                            &.like.active{
                                .iconfont{
                                    color: #e60012;
                                }
                            }
                            .iconfont{
                                font-size: 30px;
                                color: #989898;
                                transition: .5s;
                            }
                        }
                    }
                }
            </style>
            <script src="/web/lib/less.min.js"></script>
            <div id="fragment-article-share-menu" data-article-id="${id}">
                <ul class="menu-list">
                    <li class="weibo">
                        <i class="iconfont icon-weibo" onclick="utils.shareToWeibo()"></i>
                    </li>
                    <li class="weixin" onclick="utils.shareWeixin()">
                        <i class="iconfont icon-pengyouquan"></i>
                    </li>
                    <li class="qzone">
                        <i class="iconfont icon-kongjian" onclick="utils.shareToQzone()"></i>
                    </li>
                    <li class="comment" onclick="scollToComment()">
                        <div class="cover">
                            评论 <br> <span>0</span>
                        </div>
                        <i class="iconfont icon-pinglun"></i>
                    </li>
                    <li class="collect">
                        <div class="cover">
                            收藏 <br> <span>0</span>
                        </div>
                        <i class="iconfont icon-shoucang"></i>
                    </li>
                    <li class="like">
                        <div class="cover">
                            点赞 <br> <span>0</span>
                        </div>
                        <i class="iconfont icon-shoucang1"></i>
                    </li>
                    <li class="simple-view" onclick="simpleRead()">
                        <div class="cover">
                            沉浸 <br> 阅读
                        </div>
                        <i class="iconfont icon-wenben1"></i>
                    </li>
                </ul>
            </div>
            <script>
                function scollToComment() {
                    document.getElementById('fragment-comment').scrollIntoView({behavior: "smooth"});
                }
                function simpleRead() {
                    $('body').addClass('simple-view');
                }
                $(function () {
                    var articleId = $('#fragment-article-share-menu').data('articleId');
                    var $btnCommentLi = $('#fragment-article-share-menu .menu-list>li.comment');
                    var $btnCollectionLi = $('#fragment-article-share-menu .menu-list>li.collect');
                    var $btnLikeLi = $('#fragment-article-share-menu .menu-list>li.like');
                    var isCollect = false;
                    var isLike = false;

                    $.ajax({
                        url:ports.articleLikeNums,
                        data:{
                            articleId:articleId
                        },
                        success:function (res) {
                            console.log('查询文章收藏点赞数量',res);
                            if(res.status==200){
                                $btnCommentLi.find('span').text(res.data.commentCount);
                                $btnCollectionLi.find('span').text(res.data.collectionCount);
                                $btnLikeLi.find('span').text(res.data.likeCount);
                                isCollect = res.data.collection;
                                isLike = res.data.like;

                                if(isCollect){
                                    $btnCollectionLi.addClass('active');
                                }
                                if(isLike){
                                    $btnLikeLi.addClass('active');
                                }

                                $btnCollectionLi.click(function () {
                                    if(!isCollect){
                                        $.ajax({
                                            url:ports.articleCollect,
                                            data:{
                                                articleId:articleId
                                            },
                                            success:function (res1) {
                                                console.log('收藏文章',res1);
                                                if(res1.status==200){
                                                    $btnCollectionLi.addClass('active');
                                                    $btnCollectionLi.find('span').text(res1.data.collectionCount);
                                                    isCollect = true;
                                                }
                                            }
                                        })
                                    }else {
                                        $.ajax({
                                            url:ports.cancelArticleCollect,
                                            data:{
                                                articleId:articleId
                                            },
                                            success:function (res1) {
                                                console.log('取消收藏文章',res1);
                                                if(res1.status==200){
                                                    $btnCollectionLi.removeClass('active');
                                                    $btnCollectionLi.find('span').text(res1.data.collectionCount);
                                                    isCollect = false;
                                                }
                                            }
                                        })
                                    }

                                });
                                $btnLikeLi.click(function () {

                                    if(!isLike){
                                        $.ajax({
                                            url:ports.articleLike,
                                            data:{
                                                articleId:articleId
                                            },
                                            success:function (res1) {
                                                console.log('点赞文章',res1);
                                                if(res1.status==200){
                                                    $btnLikeLi.addClass('active');
                                                    $btnLikeLi.find('span').text(res1.data.likeCount);
                                                    isLike = true;
                                                }
                                            }
                                        })
                                    }else {
                                        $.ajax({
                                            url:ports.cancelArticleLike,
                                            data:{
                                                articleId:articleId
                                            },
                                            success:function (res1) {
                                                console.log('取消点赞文章',res1);
                                                if(res1.status==200){
                                                    $btnLikeLi.removeClass('active');
                                                    $btnLikeLi.find('span').text(res1.data.likeCount);
                                                    isLike = false;
                                                }
                                            }
                                        })
                                    }
                                });
                            }
                        }
                    })
                })

            </script>
        </div>
        <section id="main-content" data-article-id="${id}" data-article-img="${articleShareImage}">
            <h3>${articleTitle}</h3>
            <div class="source">
                <span class="website">${articleSource}</span>
                <span class="author"><#if articleAuthorList??><#list articleAuthorList as articlePromoter>${articlePromoter.name} </#list></#if></span>
                <span class="date">${updateTime?string('yyyy-MM-dd HH:mm:ss')}</span>
            </div>
            <hr>
            <div class="content-wrap">
                <#if articleInfoStatus == 1>
                    <section class="abstract">
                        ${articleInfo}
                    </section>
                    <div class="hr"></div>
                </#if>
                <article class="content">
                    <#if articleAudio.audioInfoStatus == 1>
                        <div class="prefix">
                            ${articleAudio.audioInfo}
                        </div>
                    </#if>
                    <div class="audio_wrap">
                        <audio class="audio">
                            <source src="${articleAudio.audioUrl}" type="audio/mp3">
                            您的浏览器不支持 audio 元素。
                        </audio>
                        <!-- 音频播放 -->
                        <i class="control iconfont iconbofang1 play_btn"></i>
                        <div class="handle_wrap">
                            <div class="progress">
                                <div class="slider">
                                    <div class="loaded"></div>
                                    <div class="pace"></div>
                                </div>
                            </div>
                            <!-- 播放时间 -->
                            <div class="time_wrap">
                                <p class="player_time">00:00</p>
                                <p class="total_time">00:00</p>
                            </div>
                        </div>
                        <div class="btn_wrap">
                            <!-- 倍速播放 -->
                            <div class="speed_wrap">
                                <i class="iconfont iconic-normal-sudu speed_btn"></i>
                                <ul class="speed_list">
                                    <li data="2">2X</li>
                                    <li data="1.5">1.5X</li>
                                    <li data="1">1X</li>
                                </ul>
                            </div>
                            <!-- 音量调节 -->
                            <div class="volume">
                                <div class="slider left">
                                    <div class="pace"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="text">
                        ${articleAudio.audioContent}
                    </div>
                </article>
                <!-- 附件 -->
                <#if adjunctList??>
                    <ul class="enclosure">
                        <#list adjunctList as adjunct>
                            <li data-url="${adjunct.adjunctUrl}" data-file-name="${adjunct.adjunctName}" title="${adjunct.adjunctName}">
                                <i class="iconfont icon-fujian1"></i>
                                <span>${adjunct.adjunctName}</span>
                            </li>
                        </#list>
                    </ul>
                </#if>
                ${copyright}
                <#if articleKeywordList??>
                    <ul class="tag-list">
                        <#list articleKeywordList as articleKeyword>
                            <li>
                                <a href="${"${domain}/web/tagList/1.html?tag=${articleKeyword.keyword}"}" target="_blank" class="tag">${articleKeyword.keyword}</a>
                            </li>
                        </#list>
                    </ul>
                </#if>
            </div>
        </section>
        ${hibuick}
        ${recommendArticle}
        <aside class="right-area">
            <div class="control area-1">
                <#if articlePromoterStatus == 1>
                    <!--#include virtual="/web/html/fragment/promoter/${articleRecommendPromoter}.htm"-->
                </#if>
                ${hotSearch}
            </div>
            <div class="control area-2">
                ${hotSpecial}
                ${rightAd}
            </div>
        </aside>
    </div>
    ${footer}
</div>
</body>
</html>
